<div class="container">
    <!-- WRAPPER -->
    <div class="container-wrapper wrapper-bg">
        <!-- HEADER -->
        <div class="container-header"
            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/bg-header.png)'">
        </div>
        <!-- NOTICE -->
        <div *ngIf="!isAllLiveFinshed" class="container-notice">
            当前已累计观看直播<span class="minutes">{{remainNumber}}</span>分钟
        </div>
        <!-- MAIN -->
        <div class="container-main"
            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/bg-center.png)'">
            <!-- TASK LIST 1 -->
            <div class="container-main__list">
                <!-- 已完成 -->
                <!-- ITEM-I -->
                <div *ngFor="let task of unFinished" class="list-item" (click)="onTaskChoose(task)"
                    [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/renqi/task-item-bg.png)'">
                    <div class="list-item__gift"
                        [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/renqi/task-item-gift-case.png)'">
                        <img class="gift-main" [src]="deployUrl+'assets/img/end-year/renqi/task-item-gift-main.png'"
                            alt="">
                        <div class="gift-counts"
                            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/renqi/task-item-gift-counts-bg.png)'">
                            <div>
                                <span *ngIf="task.code === 4">
                                    {{task.getRewardNumber}}/{{taskDetailMap.get(task.code).total}}张
                                </span>
                                <span *ngIf="task.code !== 4">
                                    {{taskDetailMap.get(task.code).total}}张
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="list-item__detail">
                        <div class="detail-title">
                            {{task.desc}}
                        </div>
                        <div class="detail-limit"><span
                                *ngIf="taskDetailMap.get(task.code).isCumulative">每个时段</span>每日可完成{{task.taskTotalRounds}}次
                            {{task.currentCompleteRounds}}/{{task.taskTotalRounds}}
                        </div>
                    </div>
                    <div class="list-item__arrow">
                        <img [src]="deployUrl+'assets/img/end-year/renqi/task-item-arrow.png'" alt="">
                    </div>
                </div>
            </div>
            <!-- 分割线 -->
            <div class="container-main__divider"
                [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/rule-divider.png)'">
            </div>
            <!-- NOTICE -->
            <div *ngIf="isAllLiveFinshed" class="container-notice">
                当前已累计观看直播<span class="minutes">{{remainNumber}}</span>分钟
            </div>
            <!-- TASK LIST 2 -->
            <div class="container-main__list">
                <!-- ITEM-2 INVALID-->
                <div *ngFor="let task of finished" class="list-item"
                    [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/renqi/task-item-bg-invalid.png)'">
                    <div class="list-item__gift"
                        [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/renqi/task-item-gift-case.png)'">
                        <img class="gift-main" [src]="deployUrl+'assets/img/end-year/renqi/task-item-gift-main.png'"
                            alt="">
                        <div class="gift-counts"
                            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/renqi/task-item-gift-counts-bg.png)'">
                            <div>
                                <span *ngIf="task.code === 4">
                                    {{task.getRewardNumber}}/{{taskDetailMap.get(task.code).total}}张
                                </span>
                                <span *ngIf="task.code !== 4">
                                    {{taskDetailMap.get(task.code).total}}张
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="list-item__detail">
                        <div class="detail-title">
                            {{task.desc}}
                        </div>
                        <div class="detail-limit">
                            <span *ngIf="task.isCumulative">每个时段</span>
                            每日可完成{{task.taskTotalRounds}}次
                            {{task.currentCompleteRounds}}/{{task.taskTotalRounds}}
                        </div>
                    </div>
                    <div class="list-item__arrow" (click)="onTaskChoose(task)">
                        <img [src]="deployUrl+'assets/img/end-year/renqi/task-item-arrow.png'" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- FOOTER -->
        <div class="container-footer"
            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/bg-footer.png)'">
        </div>
        <!-- TIPS -->
        <div class="container-tips">
            <p *ngIf="!isAndroid && !isPC">声明：本活动与Apple Inc.无关</p>
            <p>请用户注意，适度娱乐，理性消费</p>
        </div>
    </div>